<template>
  <view class="order-page">
    <view class="order-header">
      <!-- 搜索栏 -->
      <view class="order-search-bar">
        <input class="order-search-input" placeholder="搜索订单" v-model="search" />
      </view>
      <!-- 标签栏 -->
      <view class="order-tabs">
        <view v-for="(tab, idx) in tabs" :key="idx" :class="['order-tab', { active: tabActive === idx }]"
          @click="tabActive = idx">
          <text>{{ tab.label }}</text>
          <view v-if="tab.badge" class="order-tab-badge">{{ tab.badge }}</view>
        </view>
      </view>
    </view>
    <view class="order-list">
      <view v-for="order in filteredOrders" :key="order.id" class="order-card">
        <view class="order-card-header">
          <text class="order-shop-name">{{ order.shopName }}</text>
          <text class="order-status">待使用</text>
        </view>
        <view class="order-card-body">
          <image class="order-img" :src="order.img" mode="aspectFill" />
          <view class="order-info">
            <text class="order-title">{{ order.title }}</text>
            <text class="order-expiry">有效期 {{ order.expiry }}</text>
            <view class="order-tags">
              <text v-for="tag in order.tags" :key="tag" class="order-tag">{{ tag }}</text>
            </view>
          </view>
          <view class="order-price-area">
            <text class="order-price">¥{{ order.price }}</text>
            <text class="order-count">共 {{ order.count }} 件</text>
          </view>
        </view>
        <view class="order-card-actions">
          <button class="order-btn">赠送好友</button>
          <button class="order-btn" @click="addOrder(order)">再来一单</button>
          <button class="order-btn order-use-btn" @click="toreser(order)">去预约</button>
        </view>
      </view>
      <view v-if="filteredOrders.length === 0" class="order-empty">没找到订单？试试查看<text class="order-link">全部订单</text></view>
      <view class="order-schedule-entry"></view>
      <button v-if="this.orders.length>3" class="order-btn  order-schedule-btn" @click="Schedule()">查询排班</button>
    </view>
    <TabBar :current="1" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      tabs: [
        { label: '待使用', status: 0 },
        { label: '已预约', status: 1 },
        { label: '待评价', status: 2 },
      ],
      tabActive: 0,
      orders: [], // 订单列表
    };
  },
  computed: {
    filteredOrders() {
      // 根据当前激活的标签和搜索词筛选订单
      const currentStatus = this.tabs[this.tabActive].status;
      return this.orders.filter(order => {
        const matchStatus = order.status === currentStatus;
        const matchSearch = order.title.includes(this.search);
        return matchStatus && matchSearch;
      });
    },
    // 根据当前激活的标签筛选订单
    currentTabOrders() {
      const currentStatus = this.tabs[this.tabActive].status;
      return this.searchedOrders.filter(
        order => order.status === currentStatus
      );
    }
  },
  watch: {
    // 监听订单数据变化，更新徽章数量
    orders: {
      deep: true,
      handler() {
        this.updateTabBadges();
      }
    },
    // 监听搜索词变化，更新徽章数量
    search() {
      this.updateTabBadges();
    }
  },

  onShow() {
    // 获取订单列表（GET）
    uni.request({
      url: 'https://vue.maylab.top/uni/orders',
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200 && Array.isArray(res.data.data)) {
          this.orders = res.data.data;
          console.log("🚀 ~ onShow ~ this.orders:", this.orders)
        } else {
          this.orders = [];
        }
      },
      fail: () => {
        this.orders = [];
      }
    });
  },
  methods: {
    // 更新标签的徽章数量
    updateTabBadges() {
      this.tabs.forEach(tab => {
        tab.badge = this.searchedOrders.filter(
          order => order.status === tab.status
        ).length;
      });
    },

    // 再来一单（POST）
    addOrder(order) {
      // 跳转到详情页并传递套餐id
      uni.navigateTo({
        url: `/pages/shopDetail/shopDetail?id=${order.serviceId}`
      });
    },
    Schedule() {
      uni.navigateTo({
        url: `/pages/schedule/schedule`
      });
    },
    toreser(order) {
      order.status=1
      uni.request({
        url: `https://vue.maylab.top/uni/orders`,
        method: 'PUT',
        data: order,
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({ title: '订单已更新', icon: 'none' });
            this.onShow();
          }
        }
      });
      console.log("🚀 ~ toreser ~ order:", order)
      uni.navigateTo({
        url: `/pages/reservise/reservise?id=${order.serviceId}`
      });
    }
  }
};
</script>

<style>
.order-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.order-header {
  background: #fff;
  padding: 16rpx 0 0 0;
}

.order-search-bar {
  padding: 0 18rpx;
}

.order-search-input {
  width: 100%;
  height: 64rpx;
  border-radius: 32rpx;
  background: #f2f2f2;
  padding: 0 24rpx;
  font-size: 28rpx;
  border: none;
}

.order-tabs {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 12rpx 18rpx 0 18rpx;
}

.order-tab {
  font-size: 28rpx;
  color: #222;
  position: relative;
  padding-bottom: 8rpx;
}

.order-tab.active {
  color: #e43d33;
  font-weight: bold;
  border-bottom: 4rpx solid #e43d33;
}

.order-tab-badge {
  position: absolute;
  top: -8rpx;
  right: -24rpx;
  background: #e43d33;
  color: #fff;
  font-size: 20rpx;
  border-radius: 16rpx;
  padding: 2rpx 8rpx;
}

.order-list {
  padding: 18rpx;
}

.order-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  margin-bottom: 24rpx;
  padding: 18rpx;
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.order-shop-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}

.order-status {
  font-size: 28rpx;
  color: #e43d33;
}

.order-card-body {
  display: flex;
  align-items: flex-start;
  gap: 18rpx;
}

.order-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.order-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}

.order-expiry {
  font-size: 24rpx;
  color: #888;
}

.order-tags {
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap;
}

.order-tag {
  background: #f2f2f2;
  color: #666;
  font-size: 22rpx;
  border-radius: 12rpx;
  padding: 2rpx 12rpx;
}

.order-price-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.order-price {
  font-size: 32rpx;
  color: #e43d33;
  font-weight: bold;
}

.order-count {
  font-size: 24rpx;
  color: #888;
}

.order-card-actions {
  display: flex;
  gap: 18rpx;
  margin-top: 12rpx;
}

.order-btn {
  background: #f2f2f2;
  color: #222;
  font-size: 26rpx;
  border-radius: 32rpx;
  padding: 8rpx 24rpx;
  border: none;
}

.order-use-btn {
  background: #e43d33;
  color: #fff;
}

.order-schedule-btn {
  width: 160rpx;
  background: #dadada99;
  margin-bottom: 70rpx;
}

.order-empty {
  text-align: center;
  color: #888;
  font-size: 28rpx;
  margin-top: 40rpx;
}

.order-link {
  color: #e43d33;
  margin-left: 8rpx;
}
</style>
